<template>
  <div>
    <nav-header></nav-header>
    <nav-brand>
      <span>商品列表</span>
    </nav-brand>
    <div>
      <div class="container">
        <div class="filter-nav">
          <span>排序:</span>
          <a href="javascript:void(0)" class="default cur">默认</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods"
            >价格
            <svg
              class="icon icon-arrow-short"
              :class="{ 'sort-up': !sortFlag }"
            >
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a
            href="javascript:void(0)"
            class="filterby stopPop"
            @click="showFiltePop"
            >Filter by</a
          >
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div
            class="filter stopPop"
            id="filter"
            :class="{ 'filterby-show': filterBy }"
          >
            <dl class="filter-price">
              <dt>价格:</dt>
              <dd>
                <a
                  href="javascript:void(0)"
                  :class="{ cur: priceChecked === 'all' }"
                  @click="setPriceFilter('all')"
                  >所有</a
                >
              </dd>
              <dd v-for="(price, index) in priceFilter" :key="index">
                <a
                  href="javascript:void(0)"
                  @click="setPriceFilter(index)"
                  :class="{ cur: priceChecked == index }"
                  >{{ price.startPrice }}</a
                >
              </dd>
            </dl>
          </div>
          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item, index) in goodsList" :key="index">
                  <div class="pic" @click="handleClickGoods(item)">
                    <a href="/#/goodsDetail">
                      <img v-lazy="item.productImage" alt="" />
                    </a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">￥：{{ item.salePrice }}</div>
                    <div class="btn-area">
                      <a
                        href="javascript:;"
                        class="btn btn--m"
                        @click="addCart(item.productId)"
                        >加入购物车</a
                      >
                    </div>
                  </div>
                </li>
              </ul>
              <div
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="busy"
                infinite-scroll-distance="30"
              >
                <img
                  src="/static/loading-svg/loading-bubbles.svg"
                  v-show="loading"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
    <Modal :mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">请先登录</p>
      <div class="" slot="btnGroup">
        <a href="#" class="btn btn--m" @click="mdShow = false">关闭</a>
      </div>
    </Modal>
    <Modal :mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="#icon-status-ok"
          ></use>
        </svg>
        <span>加入购物车成功！</span>
      </p>
      <div class="" slot="btnGroup">
        <a href="#" class="btn btn--m" @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m" to="/cart">查看购物车</router-link>
      </div>
    </Modal>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import '../assets/css/base.css'
import '../assets/css/product.css'
import NavHeader from '../components/Header'
import NavFooter from '../components/NavFooter'
import NavBrand from '../components/NavBrand'
import axios from 'axios'
import Modal from '../components/Model'
export default {
  data () {
    return {
      goodsList: [],
      sortFlag: true,
      page: 1,
      pageSize: 8,
      busy: true,
      priceLevel: this.priceChecked,
      loading: true,
      mdShow: false,
      mdShowCart: false,
      priceFilter: [
        {
          startPrice: '0.00',
          endPrice: '100.00'
        },
        {
          startPrice: '100.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '5000.00'
        }
      ],
      priceChecked: 'all',
      filterBy: false,
      overLayFlag: false
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBrand,
    Modal
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    handleClickGoods (item) {
      this.$store.commit('handleClickGoods', item)

      this.$router.push({ path: '/goodsDetail' })
    },
    getGoodsList (flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.priceChecked
      }
      this.loading = true
      axios
        .get('/api/goods/list', {
          params: param
        })
        .then((response) => {
          var res = response.data
          console.log(res)
          this.loading = true
          if (res.status === '0') {
            if (flag) {
              this.goodsList = this.goodsList.concat(res.result.list)
              if (res.result.count === 0) {
                this.busy = true
              } else {
                this.busy = false
              }
            } else {
              this.goodsList = res.result.list
              this.busy = false
            }
          } else {
            this.goodsList = []
          }
        })
    },
    sortGoods () {
      this.sortFlag = !this.sortFlag
      this.page = 1
      this.getGoodsList()
    },
    loadMore () {
      this.busy = true
      setTimeout(() => {
        this.page++
        this.getGoodsList(true)
      }, 500)
    },
    showFiltePop () {
      this.filterBy = true
      this.overLayFlag = true
    },
    closePop () {
      this.filterBy = false
      this.overLayFlag = false
    },
    setPriceFilter (index) {
      this.priceChecked = index
      this.page = 1
      this.getGoodsList()
      // this.closePop()
    },
    addCart (productId) {
      console.log(productId)
      axios
        .post('/api/goods/addCart', {
          productId: productId
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 0) {
            this.mdShowCart = true
            this.$store.commit('updateCartCount', 1)
          } else {
            this.mdShow = true
          }
        })
    },
    closeModal () {
      this.mdShow = false
      // this.mdShowCart = false
    }
  }
}
</script>

<style lang="css" scoped>
.sort-up {
  transform: rotate(180deg);
  transition: all 0.3s ease-out;
}
.icon-arrow-short {
  transition: all 0.3s ease-out;
}
.btn:hover {
  background-color: #ffe5e6;
  transition: all 0.3s ease-out;
}
</style>
